<template>
	<div class="userstore">
		<!-- 标题栏 -->
		<div class="inpbox">
			<div>
				<el-input class="inp1" v-model="shopname" @keyup.native.enter="searchcenter"
					placeholder="输入门店名"></el-input>
				<el-input class="inp1" v-model="shopphone" @keyup.native.enter="searchcenter"
					placeholder="输入联系方式"></el-input>
				<el-button class="inp2" type="primary" @click="searchcenter" icon="el-icon-search">搜索</el-button>
			</div>
			<el-button class="inp3" @click="addbtn()" type="primary"
				icon="el-icon-circle-plus-outline">添加</el-button>
		</div>
		<!-- table表格 -->
		<el-table class="el_table" :data="shoptable">
			<el-table-column prop="iserIcon" label="头像" width="180">
				<template slot-scope="scope">
					<!-- {{baseUrl+scope.row.iserIcon}} -->
					<img class="img1" :src="baseUrl+scope.row.iserIcon" alt="" />
				</template>
			</el-table-column>
			<el-table-column prop="adminName" label="门店名" width="180">
			</el-table-column>
			<el-table-column prop="adminAccount" label="账号">
			</el-table-column>
			<el-table-column prop="adminPhone" label="联系方式">
			</el-table-column>
			<el-table-column prop="address" label="操作">
				<template slot-scope="scope">
					<el-button style="padding: 7px 10px;font-size: 12px;" @click="editStore(scope.row)" type="primary">修改</el-button>
					<el-button style="padding: 7px 10px;font-size: 12px;" @click="dele(scope.row)" type="danger">删除</el-button>
				</template>
			</el-table-column>
		</el-table>

		<!-- 分页 -->
		<el-pagination class="page" :page-size="pageSize" :current-page="pageIndex" layout="prev, pager, next" @current-change="changepage"
			:total="total">
		</el-pagination>

		<!-- 添加模态框 -->

		<el-dialog title="添加门店" :visible.sync="dialogVisible" width="40%" class="el_dialog">
			<el-form :model="dialoginfo" :rules="rules" ref="dialoginfo">
				<div class="">
					<el-form-item class="inpbox" style="margin-left: -70px;margin-top: 10px;" prop="iserIcon">
						<!-- {{dialoginfo.iserIcon}} -->
						<label for="">选择头像 :</label>
						<!-- http://localhost:8081/admin/addStoreImage -->
						<!-- :auto-upload="false"  -->
						<el-upload style="margin-left: 15px;" ref="upload"
							:action="baseUrl+'admin/addStoreImage'" 
							:data="myData" 
							:show-file-list="false"
							:on-change="handleChange"
							:before-upload="beforeAvatarUpload">
							<el-button style="padding: 0;" slot="trigger" v-if="!dialoginfo.iserIcon"
								class="el-icon-plus avatar-uploader-icon"></el-button>
							<img slot="trigger" v-if="dialoginfo.iserIcon" :src="dialoginfo.iserIcon" class="avatar">
						</el-upload>
					</el-form-item>
					<el-form-item class="inpbox" prop="adminName">
						<label for="">门店名 :</label>
						<el-input placeholder="请输入用户名" v-model="dialoginfo.adminName"></el-input>
					</el-form-item>
					<el-form-item class="inpbox" prop="adminAccount">
						<label for="">账号 :</label>
						<el-input placeholder="请输入账号" v-model="dialoginfo.adminAccount"></el-input>
					</el-form-item>
					<el-form-item class="inpbox" prop="adminPhone">
						<label for="">联系方式:</label>
						<el-input placeholder="请输入联系方式" v-model="dialoginfo.adminPhone"></el-input>
					</el-form-item>
					<el-form-item class="inpbox" prop="adminPassword">
						<label for="">密码:</label>
						<el-input placeholder="请输入密码" type="password" v-model="dialoginfo.adminPassword"></el-input>
					</el-form-item>
					<span class="dialog-footer">
						<el-button class="primary" type="primary" @click="addStore('dialoginfo')">确 定</el-button>
						<el-button class="cancle" @click="dialogVisible = false">取 消</el-button>
					</span>
				</div>
			</el-form>
		</el-dialog>
		<!-- 修改模态框 -->
		<el-dialog title="修改门店" :visible.sync="dialogVisible1" width="40%" class="el_dialog">
			<el-form :model="editdialoginfo" :rules="rules" ref="editdialoginfo">
				<div class="">
					<el-form-item class="inpbox" prop="iserIcon">
						<!-- {{editdialoginfo.iserIcon}} -->
						<label for="" style="margin-left: -45px;margin-top: 10px;">选择头像 :</label>
						<!-- http://localhost:8081/admin/changeStore -->
						<!-- :auto-upload="false"  -->
						<el-upload style="margin-left: 15px;" ref="upload1"
							:action="baseUrl+'admin/changeStore'" 
							:auto-upload="false"
							:data="ChangeData" 
							:show-file-list="false"
							:on-success="submitsuccess"
							:on-change="edithandleChange"
							:before-upload="beforeAvatarUpload">
							<img slot="trigger" :src="qianzhui+editdialoginfo.iserIcon" class="avatar">
							<!-- <img slot="trigger" v-if="flag1" :src="baseUrl+editdialoginfo.iserIcon" class="avatar"> -->
						</el-upload>
					</el-form-item>
					<el-form-item class="inpbox" prop="adminName">
						<label for="">门店名 :</label>
						<el-input placeholder="请输入用户名" v-model="editdialoginfo.adminName"></el-input>
					</el-form-item>
					<el-form-item class="inpbox" prop="adminAccount">
						<label for="">账号 :</label>
						<el-input placeholder="请输入账号" v-model="editdialoginfo.adminAccount"></el-input>
					</el-form-item>
					<el-form-item class="inpbox" prop="adminPhone">
						<label for="">联系方式:</label>
						<el-input placeholder="请输入联系方式" v-model="editdialoginfo.adminPhone"></el-input>
					</el-form-item>
					<el-form-item class="inpbox" prop="adminId">
						<label for="">店长id :</label>
						<el-input placeholder="请输入店长id" v-model="editdialoginfo.adminId"></el-input>
					</el-form-item>
					<el-form-item class="inpbox" prop="adminPassword">
						<label for="">密码:</label>
						<el-input placeholder="请输入密码" type="password" v-model="editdialoginfo.adminPassword"></el-input>
					</el-form-item>
					<span class="dialog-footer">
						<el-button class="primary" type="primary" @click="changeStore('editdialoginfo')">确 定</el-button>
						<el-button class="cancle" @click="dialogVisible = false">取 消</el-button>
					</span>
				</div>
			</el-form>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				baseUrl: require("../assets/baseUrl.js").baseUrl,
				dialogVisible: false,
				dialogVisible1: false,
				pageSize: 5,
				pageIndex: 1,
				total: 0,
				qianzhui:require("../assets/baseUrl.js").baseUrl,

				name: "",
				phone: "",

				//条件搜索
				shopname: "",
				shopphone: "",
				//信息
				shoptable: [],
				pic: "",
				//模态框
				dialoginfo: {
					iserIcon:"",
					adminName:"",
					adminAccount:"",
					adminPhone:"",
					adminPassword:""
				},
				editdialoginfo: {
					iserIcon:"",
					adminName:"",
					adminAccount:"",
					adminPhone:"",
					adminPassword:"",
					
					adminId:""
				},
				rules: {
					iserIcon: [{
						required: true,
						message: "图片不能为空!",
						trigger: "blur"
					}],
					adminName: [{
						required: true,
						message: "姓名不能为空!",
						trigger: "blur"
					}],
					adminAccount: [{
						required: true,
						message: "账号不能为空!",
						trigger: "blur"
					}],
					// adminPassword: [{
					// 	required: true,
					// 	message: "密码不能为空!",
					// 	trigger: "blur"
					// }],
					adminPhone: [{
							required: true,
							message: '电话不能为空!',
							trigger: 'blur'
						},
						{
							pattern: /^\d{11}$/,
							message: '请输入11位数字',
							trigger: 'blur'
						}],
				},
				flag1:true,
				flag2:true,
				myData:{},
				ChangeData:{}
			}
		},
		methods: {
			changepage(page) {
				// 分页器
				this.pageIndex = page
				this.name = this.shopname
				this.phone = this.shopphone
				this.Search()
			},
			searchcenter() {
				this.pageIndex = 1
				this.name = this.shopname
				this.phone = this.shopphone
				this.Search()
			},
			Search() {
				// 条件查询店长  http://localhost:8081/admin/searchStore
				if (this.shopname == "" && this.phone == "") {
					this.getAllshop()
				} else {
					this.$http.post(this.baseUrl + "admin/searchStore", {
						pageSize: Number(this.pageSize),
						pageIndex: Number(this.pageIndex),
						adminName: this.name,
						adminPhone: this.phone
					}).then(res => {
						// console.log(res)
						this.shoptable = res.data.data.context
						this.total = Number(res.data.data.pageTotal) * this.pageSize
					})
				}

			},
			getAllshop() {
				// 查询门店 http://localhost:8081/admin/showStore
				this.$http.post(this.baseUrl + "admin/showStore", {
					pageSize: Number(this.pageSize),
					pageIndex: Number(this.pageIndex)
				}).then(res => {
					// console.log(res)
					if (res.data.code == 200) {
						//console.log(res.data.data)
						this.shoptable = res.data.data.context
						this.total = Number(res.data.data.pageTotal) * this.pageSize
					}
				})
			},
			//打开修改店长模态框并且赋值
			editStore(option){
				//console.log(option)
				// var adminid=option.adminId
				// // http://localhost:8081/admin/find
				// this.$http.post(this.baseUrl+"admin/find",{
				// 	adminId:Number(adminid)
				// }).then(res=>{
				// 	console.log(res)
				// })
				this.dialogVisible1=true
				this.editdialoginfo.iserIcon=option.iserIcon
				this.editdialoginfo.adminName=option.adminName
				this.editdialoginfo.adminAccount=option.adminAccount
				this.editdialoginfo.adminPhone=option.adminPhone
				this.editdialoginfo.adminPassword=""
				
				this.editdialoginfo.adminId=option.adminId
				//console.log(option)   
				this.qianzhui=this.baseUrl
			},
			//修改店长信息
			changeStore(formName){
				this.$refs[formName].validate((valid) => {
					if (valid) {
						var s=this.editdialoginfo.iserIcon+""
						if(s.substring(0,4)=="blob"){
							if(this.editdialoginfo.adminPassword=="" || this.editdialoginfo.adminPassword==undefined){
								this.editdialoginfo.adminPassword=""
							}
							//传递的data值
							this.ChangeData={
								adminName:this.editdialoginfo.adminName,
								adminAccount:this.editdialoginfo.adminAccount,
								adminPhone:this.editdialoginfo.adminPhone,
								adminId:this.editdialoginfo.adminId,
								adminPassword:this.editdialoginfo.adminPassword
							}
							// //上传的方法
							let _this = this
							//延时器
							setTimeout(res => {
								_this.$refs.upload1.submit();
								
								
								_this.dialogVisible1=false
							})
						}else{
							this.$http.post(this.baseUrl+"admin/changeStore",{
								adminName:this.editdialoginfo.adminName,
								adminAccount:this.editdialoginfo.adminAccount,
								adminPhone:this.editdialoginfo.adminPhone,
								adminId:this.editdialoginfo.adminId,
								adminPassword:this.editdialoginfo.adminPassword
							},{headers: {'Content-Type': 'multipart/form-data'}}).then(res=>{
								if(res.data.code==200){
									this.$message.success("修改成功!")
									this.getAllshop()
									this.dialogVisible1=false
								}else if(res.data.code==500){
									this.$message.error(res.data.msg)
									this.getAllshop()
									this.dialogVisible1=false
								}
								
								
							})
						}
					} else {
						// console.log('error submit!!');
						return false;
					}
				});
			},
			submitsuccess(){
				if(this.flag1){
					this.$message.success("修改成功!")
				}
				this.getAllshop()
			},
			dele(option) {
				// 删除门店  http://localhost:8081/admin/dele
				// console.log(option.adminId)
				this.$confirm('此操作将删除该门店, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					//删除接口
					this.$http.post(this.baseUrl + "admin/dele", {
						adminId: Number(option.adminId)
					}).then(res => {
						if (res.data.code == 200) {
							this.$message.success("删除门店成功")
							this.searchcenter()
						}
					})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				})

			},
			addbtn(){
				this.dialogVisible=true
				this.pic=""
				this.dialoginfo.iserIcon=""
				this.dialoginfo.adminName=""
				this.dialoginfo.adminAccount=""
				this.dialoginfo.adminPhone=""
				this.dialoginfo.adminPassword=""
			},
			// 添加店长 http://localhost:8081/admin/addStoreInformation
			addStore(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						this.dialogVisible = false
						this.$http.post(this.baseUrl+"admin/addStoreInformation",{
							iserIcon:this.pic,
							adminName:this.dialoginfo.adminName,
							adminAccount:this.dialoginfo.adminAccount,
							adminPhone:this.dialoginfo.adminPhone,
							adminPassword:this.dialoginfo.adminPassword
						}).then(res=>{
							// console.log(res)
							if(res.data.code==200){
								// console.log(res)
								this.searchcenter()
								this.$message.success("添加成功")
							}else{
								this.$message.error(res.data.msg)
							}
							
						})
					} else {
						return false;
					}
				});
				
				
			},
			handleChange(file,fileList){
				this.dialoginfo.iserIcon = URL.createObjectURL(file.raw);
				if(file.response!=undefined){
					this.pic=file.response.msg
					// console.log(this.pic)
					if(file.response.code==500){
						this.$message.error(file.response.msg)
					}
				}

			},
			edithandleChange(file,fileList){
				this.editdialoginfo.iserIcon = URL.createObjectURL(file.raw);
				this.qianzhui=""
				
				if(file.response!=undefined){
					if(file.response.code==500){
						this.$message.error(file.response.msg)
						this.flag1=false
					}
				}
			},
			beforeAvatarUpload(file) {
				const isJPG = (file.type == "image/jpg" || file.type == "image/jpeg" || file.type == "image/png" || file.type == "image/gif");
				const isLt2M = file.size / 1024 / 1024 < 2;
			
				if (!isJPG) {
					this.$message.error('上传头像图片只能是 JPG、PNG、GIF 格式!');
				}
				if (!isLt2M) {
					this.$message.error('上传头像图片大小不能超过 2MB!');
				}
				return isJPG && isLt2M;
			}
		},
		mounted() {
			this.getAllshop()
		}
	}
</script>

<style>
	/* 标题栏 */
	.userstore .inpbox {
		margin-bottom: 20px;
		display: flex;
		justify-content: space-between;
	}

	.userstore .inpbox .inp1 {
		margin-left: 30px;
		width: 230px;
		float: left;
	}

	.userstore .inpbox .inp2 {
		margin-left: 30px;
		float: left;
	}

	.userstore .inpbox .inp3 {
		margin-right: 60px;
		float: right;
	}

	/* 表格 */
	.userstore .el-table .el-table__cell {
		text-align: center;
	}

	.userstore .el-table .touxiang {
		width: 50px;
		height: 50px;
		border-radius: 50px;
	}

	.userstore .el-table .edit {
		font-size: 13px;
		margin-right: 10px;
		color: royalblue;
		cursor: pointer;
	}

	.userstore .el-table .dele {
		font-size: 13px;
		color: red;
		cursor: pointer;
	}

	/* 分页器 */
	.userstore .page {
		margin-top: 30px;
		text-align: center;
	}

	/* 模态框 */
	.userstore .el_dialog img {
		width: 60px;
		height: 60px;
		border-radius: 50px;
	}

	.userstore .el_dialog .el-form-item__content {
		display: flex;
		width: 100%;
	}

	.userstore .el_dialog label {
		width: 40%;
		text-align: right;
		line-height: 40px;
	}

	.userstore .el_dialog input {
		height: 40px;
		width: 60%;
		margin-left: 20px;
	}

	.userstore .el_dialog .el-form-item__error {
		left: 18%;
		text-align: left;
	}

	.userstore .dialog-footer {
		display: flex;
		justify-content: center;
	}

	.userstore .img1 {
		width: 50px;
		height: 50px;
		border-radius: 50px;
	}
</style>